<template>
  <div>
    <ol>
      <li v-for="item of hotSongs" :key="item.id">
        <span>{{ item.name }}</span>
        <button @click="playMusic(item.id)">播放</button>
      </li>
    </ol>
    <hr>
    <audio ref="mp3" src="" controls></audio>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      artist: {},
      hotSongs: [],
    }
  },
  created() {
    const { id } = this.$route.params
    // 歌手详情
    axios({
      url: 'http://localhost:3000/artists?id='+ id
    }).then(res => {
      console.log(res)
      this.hotSongs = res.data.hotSongs
      this.artist = res.data.artist
    })

    // 歌手的描述
    axios({
      url: 'http://localhost:3000/artist/desc?id='+ id
    }).then(() => {
      // console.log(res)
      // this.artist = res.data
    })
  },
  methods: {
    playMusic(id) {
      // console.log(this.$refs.mp3)
      // console.log(`https://music.163.com/song/media/outer/url?id=${id}.mp3`)
      const ele = this.$refs.mp3
      ele.src = `https://music.163.com/song/media/outer/url?id=${id}.mp3`
      ele.play()
    }
  }
}
</script>

<style scoped>
ol li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #42b983;
  padding: 3px 0;
}
</style>
